import 'package:flutter/material.dart';
import 'package:xview/components/xNavbar.dart';
import 'package:xview/utils/dimension.dart';

class navbar extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _navbarState();
  }
}

class _navbarState extends State<navbar> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: XNavbar(
        title: '导航栏',
      ).render(context),
      body: Container(
        height: 300,
        margin: EdgeInsets.only(top: Dimension(context).toPx(24)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            XNavbar(
              title: '导航栏'
            ).render(context),
            XNavbar(
                title: '个人中心',
                isBack: false
            ).render(context),
            XNavbar(
              title: '导航栏',
              actions: [
                Container(
                  margin: EdgeInsets.only(right: Dimension(context).toPx(15)),
                  child: Icon(Icons.location_on_outlined,color: Color.fromRGBO(96, 98, 102, 1),size: 24),
                )
              ]
            ).render(context),
            XNavbar(
              title: '自定义插槽',
              content: Align(
                alignment: Alignment.centerLeft,
                child: Container(
                  width: Dimension(context).toPx(60),
                  margin: EdgeInsets.only(left: Dimension(context).toPx(10)),
                  decoration: BoxDecoration(
                      border: Border.all(
                        width: 1,
                        color: Color(0xffdadbde),
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(Dimension(context).toPx(30)))
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Container(
                          height: Size.infinite.height,
                          child: Material(
                              color: Colors.transparent,
                              child: GestureDetector(
                                onTap: (){
                                  print('click');
                                },
                                child: Container(
                                  width: Dimension(context).toPx(28),
                                  child: Icon(Icons.arrow_back_ios_rounded,color: Color(0xff606266),size: 16),
                                ),
                              )
                          )
                      ),
                      Container(width: 1,height: Dimension(context).toPx(10),color: Color(0xff606266)),
                      Container(
                          height: Size.infinite.height,
                          child: Material(
                              color: Colors.transparent,
                              child: GestureDetector(
                                onTap: (){
                                  print('45645');
                                },
                                child: Container(
                                  width: Dimension(context).toPx(28),
                                  child: Icon(Icons.home_outlined,color: Color(0xff606266),size: 18),
                                ),
                              )
                          )
                      ),
                    ],
                  ),
                ),
              ),
            ).render(context),
          ],
        ),
      )
    );
  }
}
